<template>
  <div class="flexbetween h_full">
    <div class="flexleft h_full pt-16">
      <div class="f-16 c_text2 fw-6">企微号</div>
      <div class="searchbox">
        <el-input
          placeholder="搜索企微昵称和企微号"
          v-model="search"
          size="small"
          suffix-icon="el-icon-search"
          @keyup.enter.native="handleQuery"
        />
      </div>
      <div class="listbox">
        <div
          class="list-item flexbetween p-8 commhover mb_20"
          v-for="(item, index) in userList"
          :key="index"
          :class="{ active: selectItem&&selectItem.id == item.id }"
          @click="handleItem(item)"
        >
          <div class="i_leftuser flex">
            <img
              src="https://wework.qpic.cn/wwpic3az/472059_fDikGmxURW66p1D_1701391824/0"
              alt=""
              class="iavatar"
            />
            <div class="ml-12">
              <div class="c_222333 accounttext f-14 mb-5">
                {{ item.username }}
              </div>
              <div class="c_f90 mt-4 f-12 accounttext">@{{ item.wxname }}</div>
            </div>
          </div>
          <div class="c_999 i_right f-14">（0）</div>
        </div>
      </div>
    </div>
    <div class="flexright h_full pt-16 pl-16 pr-16">
      <div class="f-16 c_text2 fw-6 mb-12">{{selectItem?selectItem.username:'-'}}的屏蔽对象 <span class="f-12 c_text3">（0）</span> </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="" prop="wxid">
          <el-input
            v-model="queryParams.wxid"
            placeholder="搜客户昵称/备注，群名称"
            clearable
            style="width: 220px"
            @keyup.enter.native="handleQuery"
            suffix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="显示状态"
            style="width: 120px"
          >
            <el-option label="全部" :value="1"></el-option>
            <el-option label="仅显示客户" :value="2"></el-option>
            <el-option label="仅显示客户群" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="tableloading"
        class="commtable chattable"
        :data="tableList"
      >
        <el-table-column label="屏蔽对象" min-width="300px" prop="userName">
          <template slot-scope="scope">
            <div class="flex">
              <img
                src="https://wework.qpic.cn/wwpic3az/472059_fDikGmxURW66p1D_1701391824/0"
                alt=""
                class="iavatar"
              />
              <div class="ml-12">
                <div class="c_222333 accounttext">
                  {{ scope.row.username }}
                </div>
                <div class="c_f90 mt-4 accounttext">19911383351@888</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="100px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleLogin(scope.row)"
              >登录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="gettableList"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectItem: null,
      search: "",
      userList: [
        { id: 1, username: "Gardenia", wxname: "志新" },
        { id: 2, username: "Gardenia2", wxname: "志新2" },
        { id: 3, username: "Gardenia3", wxname: "志新3" },
      ],
      statusOptions: [
        { label: "在线", value: 1 },
        { label: "离线", value: 2 },
      ],
      tableloading:false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        loginType: "",
        status: "",
        wxid: "",
      },
      total: 0,
      loading: false,
      tableList: [{ id: 1, username: "水电费" }],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getsubUserList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleItem(item) {
      this.selectItem = item;
      this.gettableList();
    },

    gettableList() {
      // this.tableloading = true;
      // getsubUserList(this.queryParams).then((response) => {
      //   this.tableList = response.rows;
      //   this.total = response.total;
      //   this.tableloading = false;
      // });
    },

    handleLogin() {},
  },
};
</script>
<style lang="scss" scoped>
.flexleft {
  width: 320px;
  border-right: 1px solid #e9e9e9;
}
.searchbox {
  padding: 12px 16px 12px 0;
}
.listbox {
  height: calc(100% - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 12px 0 0;
}
.list-item {
  border-radius: 2px;
  &:hover {
    background-color: #e9e9e9;
  }
  &.active {
    background-color: #eff3ff;
  }
}
.i_leftuser {
  flex: 1 1;
  width: 260px;
}
.i_right {
  width: 40px;
  text-align: right;
}
.flexright {
  flex: 1 1;
}
.iavatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.accounttext {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chattable {
  ::v-deep .el-table__header-wrapper th {
    background-color: #f5f5f5;
    padding: 12px 0;
  }
}
</style>